<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:pe="http://primefaces.org/ui/extensions"  
                xmlns:h="http://java.sun.com/jsf/html">
            <style type="text/css">
                .ui-datatable-header{
                    text-align: left !important;
                }
                .misOpc td div.ui-tt-c{
                    /*
                    padding-top: 0px !important;
                    padding-bottom: 0px !important;
                    */
                }
            </style>
            <h:form id="frmGestionarPermisos" onkeypress="if (event.keyCode == 13) return false;">
                <p:growl showSummary="false" showDetail="true" id="msjPermisos"/>
                <p:panel id="panPermisos" >
                    <table style="width:100%;" >
                        <thead>
                            <tr>
                                <td>
                                    <table width="100%" cellpadding="5" cellspacing="8" style="width: 920px;">
                                        <tr>
                                            <td style="width: 100px;"><h:outputText value="Código Usuario :"/> </td>
                                            <td>
                                                <p:inputText value="#{usuarioController.bean.codUsuario}" 
                                                             style="width: 100px;" disabled="true" styleClass="disabled">
                                                </p:inputText>
                                            </td>
                                            <td style="width: 60px;"><h:outputText value="Usuario :"/> </td>
                                            <td>
                                                <p:inputText value="#{usuarioController.bean.txtNombres} #{usuarioController.bean.txtApellidoPaterno} #{usuarioController.bean.txtApellidoMaterno}" 
                                                             style="width: 300px;" disabled="true" styleClass="disabled">
                                                </p:inputText>
                                            </td>
                                            <td style="width: 100px;"><h:outputLabel value="Tipo de Usuario :" /></td>
                                            <td>
                                                <p:selectOneMenu  style="width: 200px;" value="#{usuarioController.bean.tipUsuario}" disabled="true" styleClass="disabled">
                                                    <f:selectItems value="#{usuarioController.lstTipoUsuario}" 
                                                        var="tipousuario" 
                                                        itemValue="#{tipousuario.txtValor}" 
                                                        itemLabel="#{tipousuario.txtParametro}"/>
                                                </p:selectOneMenu>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </thead>  
                        <tbody>
                            <tr>
                                <td>
                                    <p:menubar style="width: 99%;" id="menuOpciones">
                                        <p:menuitem value="Asignar Perfil" icon="ui-icon-document" actionListener="#{usuarioController.validarAsignarPerfil}" 
                                                    oncomplete="asignaPerfil.show()" update=":frmAsignarPerfil">
                                        </p:menuitem>
                                        <p:menuitem value="Asignar Opciones" icon="ui-icon-document" actionListener="#{usuarioController.validarAsignarOpcion}" 
                                                    disabled="#{usuarioController.selectedUsuarioPerfil == null}" update=":dlgAsignarOpciones, msjPermisos" >
                                        </p:menuitem>
                                        <p:menuitem value="Modificar Perfil" icon="ui-icon-pencil" actionListener="#{usuarioController.validaModificarPerfil}" 
                                                    disabled="#{usuarioController.selectedUsuarioPerfil == null}" update=":dlgDetallePerfil, msjPermisos">
                                        </p:menuitem>
                                        <p:menuitem value="Asignar Horario" icon="ui-icon-pencil" actionListener="#{usuarioController.validaAsignarHorarioPerfil}" 
                                                    disabled="#{usuarioController.selectedUsuarioPerfil == null}" update=":dlgDetalleHorarioPerfil, msjPermisos">
                                        </p:menuitem>
                                        
                                        <p:menuitem value="Personalizar Acción" icon="ui-icon-pencil" process="@this, grdAccionesAsignadas" 
                                                    disabled="#{usuarioController.selectedUsuarioAccion == null}" actionListener="#{usuarioController.loadAccionAsignada}"
                                            update=":dlgDetalleAutorizacion, :frmDetalleAutorizacion, msjPermisos">
                                        </p:menuitem>
                                        
                                        <p:menuitem value="Salir" icon="ui-icon-arrowreturnthick-1-w" oncomplete="asignaPermisos.hide()" 
                                                    process="@this">
                                        </p:menuitem>
                                    </p:menubar>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p:panel header="Perfiles Asignados" id="pnlPerAsignados" toggleable="true"
                                             style="width: 1080px;" widgetVar="wPerAsignados" visible="true">
                                        <p:dataTable id="grdPerfiles" var="item" 
                                                     value="#{usuarioController.lstUsuarioPerfil}" 
                                                     rowKey="#{item.id}" scrollHeight="140" scrollable="true"
                                                     selection="#{usuarioController.selectedUsuarioPerfil}" 
                                                     selectionMode="single" paginator="false" 
                                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                     rowsPerPageTemplate="5,10,15,20"
                                                     emptyMessage="Usuario sin perfiles asignados."
                                                     rowIndexVar="index">
                                            <p:ajax event="rowSelect" listener="#{usuarioController.listaOpcionesDePerfil}" 
                                                    update=":frmGestionarPermisos:pnlOpcAsignadas, :frmGestionarPermisos:pnlAccAsignadas, :frmGestionarPermisos:menuOpciones" 
                                                    oncomplete="wAccAsignadas.collapse();"/>
                                            <p:column width="240" style="text-align: center; width: 240px">
                                                <f:facet name="header">
                                                    <h:outputText value="Modulo"/>
                                                </f:facet>
                                                <h:outputText value="#{item.nidPerfil.nidModulo.txtModulo}" />
                                            </p:column>
                                            <p:column width="240" style="text-align: center; width: 240px">
                                                <f:facet name="header">
                                                    <h:outputText value="Perfil"/>
                                                </f:facet>
                                                <h:outputText value="#{item.nidPerfil.txtPerfil}" />
                                            </p:column>
                                            <p:column width="110" style="text-align: center; width: 110px">
                                                <f:facet name="header">
                                                    <h:outputText value="Unidad Territorial"/>
                                                </f:facet>
                                                <h:outputText value="#{usuarioController.mapaUnidadTerritorial[item.codZonal]}" />
                                            </p:column>
                                            <p:column width="50" style="text-align: center; width: 50px">
                                                <f:facet name="header">
                                                    <h:outputText value="Consulta"/>
                                                </f:facet>
                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgConsulta == '1'}"/>
                                            </p:column>
                                            <p:column width="40" style="text-align: center; width: 40px">
                                                <f:facet name="header">
                                                    <h:outputText value="Activo"/>
                                                </f:facet>
                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgActivo == '1'}"/>
                                            </p:column>
                                            <p:column width="40" style="text-align: center; width: 40px">
                                                <f:facet name="header">
                                                    <h:outputText value="Horario"/>
                                                </f:facet>
                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgHorarioRestringido == '1'}"/>
                                            </p:column>
                                            <p:column width="70" style="text-align: center; width: 70px">
                                                <f:facet name="header">
                                                    <h:outputText value="Fec. Incio"/>
                                                </f:facet>
                                                <h:outputText value="#{item.fecInicio}" >
                                                    <f:convertDateTime pattern="dd/MM/yyy HH:mm" locale="es_PE" type="date" timeZone="EST"/>
                                                </h:outputText>
                                            </p:column>
                                            <p:column width="70" style="text-align: center; width: 70px">
                                                <f:facet name="header">
                                                    <h:outputText value="Fec. Fin"/>
                                                </f:facet>
                                                <h:outputText value="#{item.fecFin}" >
                                                    <f:convertDateTime pattern="dd/MM/yyy HH:mm" locale="es_PE" type="date" timeZone="EST"/>
                                                </h:outputText>
                                            </p:column>
                                        </p:dataTable>
                                    </p:panel>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p:panel header="#{usuarioController.tituloPanelOpciones}" id="pnlOpcAsignadas" toggleable="true"
                                             style="width: 1080px;">
                                        <p:tree id="grdOpciones" value="#{usuarioController.opcionTree}" var="itemOp"  
                                                     rendered="#{usuarioController.opcionTree != null}" styleClass="misOpc"
                                                     style="width: 100%; height: 160px;" selectionMode="single"
                                                     selection="#{usuarioController.selectedOpcionNode}" animate="true">  
                                            <p:ajax event="select" listener="#{usuarioController.listaAccionesDeOpcionDelPerfil}" 
                                                    update=":frmGestionarPermisos:pnlAccAsignadas" oncomplete="wPerAsignados.collapse();wAccAsignadas.expand()" />
                                            <p:treeNode expandedIcon="ui-icon-folder-open" 
                                                        collapsedIcon="ui-icon-folder-collapsed" >  
                                                <h:outputText value="#{itemOp}" /> 
                                            </p:treeNode>
                                            <p:treeNode type="document" icon="ui-icon-document" styleClass="mitreenode">
                                                <h:outputText value="#{itemOp}" style="padding-right: 10px;"/>
                                                <h:selectBooleanCheckbox value="#{(itemOp.flgConsulta=='1')?true:false}" disabled="true"/>
                                            </p:treeNode>
                                        </p:tree>
                                    </p:panel>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p:panel header="#{usuarioController.tituloPanelAcciones}" id="pnlAccAsignadas" toggleable="true"
                                             style="width: 1080px;" collapsed="true" widgetVar="wAccAsignadas" >
                                        <p:dataTable id="grdAccionesAsignadas" var="item" 
                                                     value="#{usuarioController.lstUsuarioAccion}" 
                                                     rowKey="#{item.accion.id}" scrollable="true" scrollHeight="160"
                                                     selection="#{usuarioController.selectedUsuarioAccion}" 
                                                     selectionMode="single" paginator="false" 
                                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                     rowsPerPageTemplate="5,10,15,20"
                                                     emptyMessage="Usuario sin acciones asignadas."
                                                     rowIndexVar="index">
                                            <p:ajax event="rowSelect" update=":frmGestionarPermisos:menuOpciones" />
                                            <p:column width="250" style="text-align: left; width: 250px">
                                                <f:facet name="header">
                                                    <h:outputText value="Accion"/>
                                                </f:facet>
                                                <h:outputText value="#{item.accion.txtAccion}" />
                                            </p:column>
                                            <p:column width="100" style="text-align: center; width: 100px">
                                                <f:facet name="header">
                                                    <h:outputText value="Fecha Inicio"/>
                                                </f:facet>
                                                <h:outputText value="#{item.fecInicio}" >
                                                    <f:convertDateTime pattern="dd/MM/yyy HH:mm" locale="es_PE" type="date" timeZone="EST"/>
                                                </h:outputText>
                                            </p:column>
                                            <p:column width="100" style="text-align: center; width: 100px">
                                                <f:facet name="header">
                                                    <h:outputText value="Fecha Fin"/>
                                                </f:facet>
                                                <h:outputText value="#{item.fecFin}" >
                                                    <f:convertDateTime pattern="dd/MM/yyy HH:mm" locale="es_PE" type="date" timeZone="EST"/>
                                                </h:outputText>
                                            </p:column>
                                            <p:column width="60" style="text-align: center; width: 60px">
                                                <f:facet name="header">
                                                    <h:outputText value="Consulta"/>
                                                </f:facet>
                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgConsulta == '1'}"/>
                                            </p:column>
                                            <p:column width="60" style="text-align: center; width: 60px">
                                                <f:facet name="header">
                                                    <h:outputText value="Activo"/>
                                                </f:facet>
                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgActivo == '1'}"/>
                                            </p:column>
                                            <p:column width="200" style="text-align: left; width: 200px">
                                                <f:facet name="header">
                                                    <h:outputText value="Url"/>
                                                </f:facet>
                                                <h:outputText value="#{item.accion.txtUrl}" />
                                            </p:column>
                                        </p:dataTable>
                                    </p:panel>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </p:panel>
            </h:form>
</ui:composition>